<!-- src/components/ThreeScene.vue -->
<template>
  <div ref="container" class="scene-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入GSAP
import gsap from "gsap";
//导入dat.gui
import * as dat from "dat.gui";
//顶点着色器
import deepVertexShader from "@/shader/deep/vertex.glsl";
// //片元着色器
import deepFragmentShader from "@/shader/deep/fragmentShader.glsl";
//给当前组件一个名称，使用defineOptions定义
defineOptions({
  name: "ThreeScene",
});

const container = ref<HTMLElement>();
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let cube: THREE.Mesh;
//声明轨道控制器
let controls: OrbitControls;

let clock: THREE.Clock;

let rawShaderMaterial: THREE.RawShaderMaterial;

let texture: THREE.Texture;
// 初始化场景
const initScene = () => {
  // 创建场景
  scene = new THREE.Scene();
  //添加坐标轴
  const axesHelper = new THREE.AxesHelper(6);
  scene.add(axesHelper);

  // 创建相机
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  //设置相机位置
  camera.position.z = 6;

  //创建纹理
  const texture = new THREE.TextureLoader().load(
    "/textures/PNG (Black background)/china.jpg"
  );

  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setClearColor(0x000000, 0); // 设置背景透明
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value?.appendChild(renderer.domElement);

  // 创建轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.01;
  //创建一个平面
  const planeGeometry = new THREE.PlaneGeometry(3, 3, 128, 128);
  //创建着色器材质
  rawShaderMaterial = new THREE.RawShaderMaterial({
    vertexShader: deepVertexShader,
    fragmentShader: deepFragmentShader,
    side: THREE.DoubleSide,
    uniforms: {
      uTime: { value: 0 },
      uTexture: { value: texture },
    },
    // wireframe: true,
  });
  const plane = new THREE.Mesh(planeGeometry, rawShaderMaterial);
  scene.add(plane);

  //使用Clock
  clock = new THREE.Clock();
  // 开始动画循环
  animate();
};

// 动画循环
const animate = () => {
  // 获取时间
  const time = clock.getElapsedTime();
  rawShaderMaterial.uniforms.uTime.value = time;
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

// 处理窗口大小变化
const handleResize = () => {
  if (!container.value) return;

  camera.aspect = window.innerWidth / window.innerHeight;
  //设备像素比

  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // 设置设备像素比
};

// 组件挂载时初始化场景
onMounted(() => {
  initScene();
  window.addEventListener("resize", handleResize);
});

// 组件卸载时清理资源
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped lang="less">
.scene-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
</style>
